//导入路由相关的组件
import YYG from "../page/YYG/YYG";
import MineMusic from "../page/MineMusic/MineMusic";
import Singer from "../page/Singer/Singer";
import NewAlbum from "../page/NewAlbum/NewAlbum";
import { Navigate } from "react-router-dom";
//1. 导入 lazy Suspense
import {lazy, Suspense} from 'react'

// import HeroList from "../components/11_英雄列表/HeroList";
// import HeroDetail from "../components/13_英雄详情/HeroDetail";

//2. 修改组件的导入方式
let HeroList = lazy(() => {
  return import('../components/11_英雄列表/HeroList');
});

let HeroDetail = lazy(() => {
  return import('../components/13_英雄详情/HeroDetail');
});


//声明路由数组
let routes = [
  {
    path: '/yyg',
    element: <YYG />,
    children: [
      {
        path: '/yyg/singer',
        element: <Singer />
      },
      {
        path: '/yyg/new-album',
        element: <NewAlbum />,
      },
      {
        index: true,
        element: <h1>欢迎来到 QQ 音乐</h1>,
      }
    ]
  },
  {
    path: '/mine-music',
    element: <MineMusic />
  },
  // {
  //   path: '/',
  //   // 只要 Navigate 组件被渲染, 则页面就会被重定向(页面无刷新的重定向)
  //   element: <Navigate to='/yyg/singer' />
  // },
  //英雄列表的路由规则
  {
    path: '/heros',
    element: load(HeroList) //3. 设置路由对应的组件时, 使用 Suspense 包裹的组件, 并且要设置 fallback 这个应急的虚拟 DOM
  },
  // app.get('/goods/:id.html', (req, res) => {})
  {
    path: '/hero/:id',
    element: load(HeroDetail)
  }
];

//封装一个函数
/*
  <HeroList />  React.createElement(HeroList, null);
  load(HeroList)   <HeroList />  => React.createElement(HeroList, null);
*/
function load(Component){
  return <Suspense fallback={<h1>加载中...</h1>}><Component /></Suspense>;
}

//暴露
export default routes;